<template>
    <div class="cms-case">
        <div class="cms-case-content">
            <div class="case-title">客户案例</div>
            <hr class="case-hr"/>

            <div class="case-box">

                <div class="case-item" v-for="item in caseItem">
                    <div class="item-content">
                        <div class="item-image"><img :src="item.customerImage"/></div>
                        <div class="item-title">{{item.caseTitle}}</div>
                        <div class="item-type">{{item.companyType}}</div>
                        <div class="item-text">
                            {{item.caseContent}}
                        </div>
                    </div>

                </div>

            </div>

        </div>


    </div>
</template>

<script>
    import caseApi from '@/api/caseApi'
    export default {
        name: "CmsCase",
        data(){
            return{
                caseItem:[]
            }
        },
        created:async function(){
            let res =await caseApi.caseDetail();
            if (res.code == '200'){
                this.caseItem = res.data
            }
        }
    }
</script>

<style scoped>
    .cms-case{
        width: 100%;
        height: auto;
        float: left;
    }
    .cms-case-content{
        text-align: center;
        max-width:1540px;
        width: 100%;
        /*margin: 0 auto;*/
        margin-left: 10%;
        margin-top: 50px;
        margin-bottom: 80px;
        float: left;
        height: auto;
    }
    .case-title{
        margin-top: 15px;
        font-size: 32px;
        margin-bottom: 10px;
        color: #ff7908;
    }
    .case-hr{
        border-color: #ff7908;
        opacity: 0.4;
    }
    .case-box{
        margin-top: 50px;
    }
    .case-item{
        width: 33.3%;
        float: left;
        height: 335px;
        margin-top: 15px;
    }
    .item-content{
        background-color: #FFFFFF;
        width: 80%;
        height: 335px;
        margin-left: 10%;
        border-radius: 15px;
    }
    .item-image{
        float: left;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-left: 30px;
        margin-top: 20px;
    }
    .item-image > img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .item-title{
        float: left;
        font-size: 22px;
        margin-top: 30px;
        margin-left: 40px;
        font-weight: bold;
    }
    .item-type{
        font-size: 17px;
        color: #8c939d;
        float: left;
        margin-top: 10px;
        margin-left: 40px;
    }
    .item-text{
        text-align: left;
        margin-top:20px;
        width: 80%;
        margin-left: 10%;
        float: left;
        font-size: 14px;
    }
</style>